<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>个人信息</title>
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> -->
	<meta name="viewport" content="width=750,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">
	<script type="text/javascript">
		function setWidth(e) { if (/Andriod/i.test(navigator.userAgent)) { var f, d = window.innerWidth; (d != e) && (f = d / e), document.addEventListener("DOMContentLoaded", function () { var a = document.getElementsByTagName("body")[0]; a.style.webkitTransformOrigin = "left top"; a.style.webkitTransform = "scale(" + f + ")" }, !1) } } setWidth(750);
	</script>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<!--标准mui.css-->
	<link rel="stylesheet" href="css/mui.min.css">
	<!--App自定义的css-->
	<link rel="stylesheet" type="text/css" href="css/common.css"/>
	<link rel="stylesheet" type="text/css" href="css/information.css"/>
	<style>
		.mui-slider-indicator .mui-active.mui-indicator{
			background: #00c6ff;
			height: 20px;
			width: 20px;
		}
	</style>
</head>
<body>
	<!--侧滑菜单容器  - 最大容器-->
	<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
		<!--右侧菜单部分-->


		<aside id="offCanvasSide" class="mui-off-canvas-right my-mui-draggable">
			<div id="offCanvasSideScroll" class="mui-scroll-wrapper ">
				<div class="mui-scroll ">
					<div class="content my-content">
						<p>
							<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block my-btn">×</button>
						</p>
					</div>
					<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted my-table-view my-mui-table-view-cell">
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="index.html" class="mui-navigate-right my-mui-navigate-right">
								首页
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="contact_us.html" class="mui-navigate-right my-mui-navigate-right">
								关于金鸿基
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="match.html" class="mui-navigate-right my-mui-navigate-right">
								赛事中心
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="video_list.html" class="mui-navigate-right my-mui-navigate-right">
								赛事视频
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="apply_team.html" class="mui-navigate-right my-mui-navigate-right">
								报名中心
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="team_detail.html" class="mui-navigate-right my-mui-navigate-right">
								直播间
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="about_us.html" class="mui-navigate-right my-mui-navigate-right">
								公司资讯
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="my-team.html" class="mui-navigate-right my-mui-navigate-right">
								服务中心
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="contact_us.html" class="mui-navigate-right my-mui-navigate-right">
								联系我们
							</a>
						</li>
					</ul>
					<div class="footbtn">
						<a href="register.html" class="my-text">
							登录
						</a>
					</div>
				</div>
			</div>
		</aside>



		<!--主页部分-->
		<div class="mui-inner-wrap">
			<!--页面头部-->
			<header class="mui-bar mui-bar-nav my-mui-bar">
				<a class="mui-action-back mui-icon mui-pull-left">
					<img src="images/logo.png" alt="">
				</a>
				<h1 class="mui-title"></h1>
				<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-icon-bars mui-pull-right my-nav"></a>
			</header>
			<!--页面内容-->
			<div id="offCanvasContentScroll" class=" mui-scroll-wrapper">
				<div class="mui-content my-mui-content">
					<div id="slider" class="mui-slider my-mui-slider">
						<!-- 导航 -->
						<div class="nav">
							<ul>
								<li><a href="information.html">个人资料</a></li>
								<li><a href="team.html">我的团队</a></li>
								<li><a href="activity.html">参加活动</a></li>
							</ul>
							<div class="c"></div>
						</div>
						<!-- 头像 -->
						<div class="header-b">
							<span>头像</span>
							<img id="head-img" src="images/info_img/header.jpg" alt="">
						</div>
						<div style="clear:both;"></div>
						<!-- 基本信息 -->
						<div class="info-b">
							<ul>
								<li>昵称<input type="text" name=""></li>
								<li>真实姓名<input type="text" name=""></li>
								<li>昵称<input type="text" name=""></li>
								<li>手机号码<input type="text" name=""></li>
								<li>邮箱<input type="text" name=""></li>
								<li>
									<h4>性别</h4>
									<span>未设定</span>
								</li>
								<li>
									<h4>生日</h4>
									<span class="birth">未设定</span>
								</li>
								<li>
									<h4>居住地</h4>
									<span>未设定</span>
								</li>
							</ul>	
						</div>
						<!-- 保存按钮 -->
						<!-- <div class="s-btn">
							<input type="button" value="保存" name="">
						</div> -->
						<div class="btn-b">
							<p class="s-btn" id="btn1">保存</p>
							<!-- <input type="button" value="保存" name="" class="s-btn"> -->
						</div>
					
					</div>
				</div>
			</div>
			
			<!-- off-canvas backdrop -->
			<div class="mui-off-canvas-backdrop"></div>
		</div>
	</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/common.js"></script>
<script>
    /*首页图片*/
    /*是否自动轮播在 common 样式中设置*/
    // var slider = mui("#slider");
    // slider.slider({
    //     interval: 3000	// 时间间隔
    // });

	//超链接跳转
	var href=document.getElementsByTagName('a');
	// console.log(href);
	for (var i = 0; i < href.length; i++) {
		href[i].ontouchend = function () {
			window.location.href = this.getAttribute("href");
		}
	};

	// 点击头像变大
	var h_img=document.getElementById('head-img');
	h_img.ontouchend=function(){
		h_img.style.width='150px';
	};

	h_img.ontouchmove=function(){
		h_img.style.width='100px';
		
	};

	// 表单验证
	var btn=document.getElementById('btn1');
	btn.ontouchend=function(){
		// console.log('这是弹窗');
		alert('恭喜你保存信息成功!');
	};

	//

</script> 

</html>